<template>
    <div>
        <div>
            <div>
                 <form class="navbar-form navbar-left">
                    <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" v-model="search">
                    </div>
                    <button type="button" class="btn btn-default" @click="searchBtn">搜索</button>
                </form>
            </div>
            <div v-show="status">
                <div>
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th><input type="checkbox"></th>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>电话</th>
                                <th>所借书目</th>
                                <!-- <th>借书日期</th>
                                <th>归还日期</th> -->
                                <th>Vip</th>
                                <!-- <th>书籍类型</th> -->
                                <th>应缴金额</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in list" :key="index">
                                <td ><input type="checkbox"></td>
                                <td>{{item.id}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.tel | formGrade(item.vip)}}</td>
                                <td>{{item.bookName}}</td>
                                <!-- <td>{{item.time1}}</td>
                                <td>{{item.time2}}</td> -->
                                <td>{{item.vip}}</td>
                                <!-- <td>{{item.type}}</td> -->
                                <td>{{item.money}}</td>
                                <td>
                                    <button type="button" class="btn btn-primary" @click="updateFormClick(item)">修改</button>
                                    <button type="button" class="btn btn-info">查看</button>
                                    <button type="button" class="btn btn-danger" @click="delBtnClick(item.id)">删除</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
              </div>
              <div>
                <Pagenation :totalPage="totalPage" :pageconfige="pageconfige" @pageChange="pageChange"></Pagenation>
              </div>
              <div class="masker" v-show="mskStatus">
                  <div class="dialog">
                     <div class="dialog-head"> <h3>请确认是否删除此条信息?</h3></div>
                     <div class="btn-box">
                         <button class="btn btn-default" @click="delBtnSure">确认</button>
                         <button class="btn btn-default" @click="cancelClick">取消</button>
                     </div>
                  </div>
              </div>
            </div>
            <div v-show="!status">没有查到您要找的信息</div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import Pagenation from '../components/Pagenation'
    export default {
        components:{
            Pagenation
        },
        data(){
            return {
                list:[],
                mskStatus:false,
                delId:'',
                search:'',
                status:true,
                pageconfige:{
                    currentPage:1,
                    pageSize:3
                },
                totalPage:''

            }
        },
        methods:{
            addBtnClick(){
                this.$router.push({
                    name:'addFrom'
                })  
            },
            getData(){
                this.$axios.get('http://localhost/api.php/vrouterbook',{
                    params:{
                        transform:1,
                        order:'id,desc',
                        page:this.pageconfige.currentPage+','+this.pageconfige.pageSize,
                        filter:'name,cs,'+this.search
                    }
                })
                .then(res =>{
                    if(res.data.vrouterbook.length>0){
                         this.totalPage=Math.ceil(res.data._results/this.pageconfige.pageSize)
                        this.list = res.data.vrouterbook
                        this.status = true
                            
                    }else{
                        this.status = false
                       
                    }
                    //console.log([{n:1,c:2},])
                    //console.log(this.list)
                })
                .catch( err =>{
                    console.log(err)
                }) 
            },
            updateFormClick(item){
                 this.$router.push({
                    name:'updateForm',params:{item:item}
                })  
            },
            delBtnClick(id){
                console.log(id)
                this.mskStatus =true
                this.delId = id
            },
            cancelClick(){
                this.mskStatus =false
            },
            delBtnSure(){
                this.$axios.delete('http://localhost/api.php/vrouterbook/'+this.delId)
                .then( res=>{
                    if(res){
                        this.mskStatus =false
                        this.getData()
                    }
                })
                .catch( err =>{

                })
            },
            // 页面点击改变
            pageChange(index){
                this.pageconfige.currentPage = index
                this.getData()
            },
            // 搜索
            searchBtn(){
                this.getData()
            }
        },
        mounted(){
            this.getData()
        },
       filters:{
           formGrade(val,vip){
               if(vip=="是"){
                    if(val==1){
                        return '是一班'
                    }else if(val==2){
                        return '是二班'
                    }
               }else if(vip=="否"){
                    if(val==1){
                        return '不是一班'
                    }else if(val==2){
                        return '不是二班'
                    }

               }
               
           }
       }
    }
</script>

<style scoped>
.table>tbody>tr>td{
    vertical-align: middle;
}
.masker{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.5)
}
.dialog{
    width: 600px;
    height: 300px;
    background: #fff;
    margin: 50px auto;
    position: relative;
}
.btn-box{
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.dialog-head{
    border-bottom: 1px solid #ccc;
    /* margin-left: 20px; */
}
.dialog-head h3{
    padding: 20px 0 4px 20px;
}
</style>